<template>
	<view id="box">
		<view class="status_bar"></view>
		<view class="header" style="background-image: url(../../static/img/parentsbackground.png);">
			<view class="namebutton active">周大花</view>
			<view class="namebutton">周二花</view>
			<view class="namebutton">周三花</view>
		</view>
		<view class="background">
			<image src="../../static/img/banner.51dcfeb.png" class="big"></image>
			<view class="span" style="background-image: url(../../static/img/span.png);">周大花的妈妈</view>
		</view>
		<view class="list">
			<view class="chooseclass" style="background-image: url(../../static/img/chooseclass.png);"></view>
			<view class="classschedule" style="background-image: url(../../static/img/classschedule.png);"></view>
			<view class="selectedcourse" style="background-image: url(../../static/img/the%20selected%20courses.png);"></view>
		</view>
		<view class="titleBox">
			<view class="title">正在学的课程</view>
			<view class="all">
				<image src="../../static/img/showAll.png" mode=""></image>
				<text>showAll</text>
			</view>
		</view>
		<view class="classList">
			<view class="image"></view>
			<view class="message">
				<text>春天培训班</text>
				<view class="one">
					<image src="../../static/img/activitycenter.png"></image>
					<text>活动时间</text>
				</view>
				<view class="two">
					<image src="../../static/img/时间.png"></image>
					<text>周一下午16:00-17:00</text>
				</view>
			</view>
			<view class="detail">
				<view class="classtime">学时：16小时</view>
				<view class="total">总人数：50人</view>
				<view class="surplus">剩余名额：10人结束</view>
			</view>
		</view>
		<view class="classList">
			<view class="image"></view>
			<view class="message">
				<text>春天培训班</text>
				<view class="one">
					<image src="../../static/img/activitycenter.png"></image>
					<text>活动时间</text>
				</view>
				<view class="two">
					<image src="../../static/img/时间.png"></image>
					<text>周一下午16:00-17:00</text>
				</view>
			</view>
			<view class="detail">
				<view class="classtime">学时：16小时</view>
				<view class="total">总人数：50人</view>
				<view class="surplus">剩余名额：10人结束</view>
			</view>
		</view>
		<view class="classList">
			<view class="image"></view>
			<view class="message">
				<text>春天培训班</text>
				<view class="one">
					<image src="../../static/img/activitycenter.png"></image>
					<text>活动时间</text>
				</view>
				<view class="two">
					<image src="../../static/img/时间.png"></image>
					<text>周一下午16:00-17:00</text>
				</view>
			</view>
			<view class="detail">
				<view class="classtime">学时：16小时</view>
				<view class="total">总人数：50人</view>
				<view class="surplus">剩余名额：10人结束</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	#box{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #46f1de;
	}

	.header {
		width: 753rpx;
		height: 332rpx;
		
		background-size: 100% 100%;
		display: flex;

		.namebutton {
			width: 172rpx;
			height: 70rpx;
			font-size: 36rpx;
			text-align: center;
			display: flex;
			color: white;
			justify-content: center;
			align-items: center;
		}

		.namebutton.active {
			width: 172rpx;
			height: 70rpx;
			background-color: #90f7eb;
			border-radius: 35rpx;
			border: none;
			font-size: 36rpx;
			text-align: center;
			color: rgb(0, 175, 155);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.background {
		.big {
			position: absolute;
			left: 20rpx;
			top: 120rpx;
			width: 714rpx;
			height: 364rpx
		}

		.span {
			width: 254rpx;
			height: 64rpx;
			
			background-size: 100% 100%;
			position: absolute;
			left: 30rpx;
			top: 148rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 36rpx;
		}
	}

	.list {
		width: 100%;
		display: flex;
		justify-content: left;
		margin-top: 164rpx;
		align-content: space-around;

		.chooseclass {
			box-shadow: 0px 5px 13px #ffb990;
			width: 223rpx;
			height: 137rpx;
			
			background-size: 100% 100%;
			margin-left: 30rpx;

		}

		.classschedule {
			box-shadow: 0px 5px 13px #69d0ff;
			width: 223rpx;
			height: 137rpx;
			
			background-size: 100% 100%;
			margin-left: 12rpx;

		}

		.selectedcourse {
			box-shadow: 0px 3px 13px #69ffb2;
			width: 223rpx;
			height: 137rpx;
			
			background-size: 100% 100%;
			margin-left: 12rpx;

		}
	}

	.titleBox {
		margin-top: 60rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: left;
		align-items: center;

		.title {
			font-size: 34rpx;
			color: black;
		}

		.all {
			display: flex;
			align-items: center;
			margin-left: 372rpx;

			image {
				width: 22rpx;
				height: 22rpx;
			}

			text {
				font-size: 22rpx;
				color: rgb(121, 121, 121);
				margin-left: 8rpx;
			}
		}
	}

	.classList {
		width: 690rpx;
		height: 220rpx;
		background-color: white;
		margin-left: 30rpx;
		margin-top: 28rpx;
		display: flex;
		align-items: center;

		.image {
			width: 166rpx;
			height: 148rpx;
			margin-left: 18rpx;
			background: #aa55ff;
			border-radius: 10rpx;
		}
	}

	.message {
		margin-left: 10rpx;
		.one {
			margin-top: 28rpx;
		}

		.two {
			margin-top: 10rpx;
		}

		view {
			font-size: 22rpx;
			color: rgb(179, 179, 179);

			image {
				width: 22rpx;
				height: 22rpx;
			}

			text {
				margin-left: 8rpx;
			}
		}

	}

	.detail {
		margin-right: 0;
		margin-left: 36rpx;
		text-align: right;
		.classtime{
			font-size: 26rpx;
			color:rgb(137, 137, 137) ;
			margin-top: 10rpx;
		}
		.total{
			font-size: 29rpx;
			color: rgb(255,108,44);
			margin-top: 20rpx;
		}
		.surplus{
			font-size: 22rpx;
			color: rgb(139,139,139);
			margin-top: 8rpx;
		}
	}


</style>
